import { StyleSheet, Text, View, Image, Pressable } from 'react-native';
import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useRoute } from '@react-navigation/native';
import { NavBarHeader } from '~/components';
import { px2dp, scale } from '~/utils/px2dp';
import { observer, webSocketStore } from '~/store';
import { getCallRole, setCallRole } from '~/utils/socketMessenger';

export default observer(() => {
    const { t } = useTranslation();
    const router = useRoute<any>();
    const { device_sn } = router.params || {};
    let { callRoleStatus } = webSocketStore;
    const getCallStatus = () => {
        getCallRole(device_sn, { sn_id: device_sn, set_state: 0 });
    };
    const onPress = (num) => {
        setCallRole(device_sn, { sn_id: device_sn, set_state: 1, data: num });
        setTimeout(() => {
            getCallStatus();
        }, 500);
    };
    useEffect(() => {
        getCallStatus();
    }, []);

    return (
        <View style={styles.container}>
            <NavBarHeader title={t('CallRole.title')} />
            <Pressable
                style={styles.listItem}
                onPress={() => {
                    callRoleStatus & 1 ? onPress((callRoleStatus &= ~1)) : onPress((callRoleStatus |= 1));
                }}>
                <Text style={styles.title}>{t('CallRole.t1')}</Text>
                <Image
                    resizeMode="contain"
                    source={{
                        uri: `https://bjy-dev.oss-cn-shenzhen.aliyuncs.com/xcx/alarm_clock/${
                            callRoleStatus & 1 ? 'open.png' : 'shut.png'
                        }`,
                    }}
                    style={styles.switchIcon}
                />
            </Pressable>
            {/* <Pressable
                style={styles.listItem}
                onPress={() => {
                    callRoleStatus & 2 ? onPress((callRoleStatus &= ~2)) : onPress((callRoleStatus |= 2));
                }}>
                <Text style={styles.title}>{t('CallRole.t2')}</Text>
                <Image
                    resizeMode="contain"
                    source={{
                        uri: `https://bjy-dev.oss-cn-shenzhen.aliyuncs.com/xcx/alarm_clock/${
                            callRoleStatus & 2 ? 'open.png' : 'shut.png'
                        }`,
                    }}
                    style={styles.switchIcon}
                />
            </Pressable> */}
        </View>
    );
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    listItem: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        backgroundColor: '#fff',
        marginHorizontal: px2dp(32),
        marginTop: px2dp(32),
        padding: px2dp(24),
        borderRadius: px2dp(12),
    },
    title: {
        color: '#000',
        fontSize: scale(30),
        fontWeight: 'bold',
    },
    switchIcon: {
        width: px2dp(80),
        height: px2dp(52),
    },
});
